<template>
  <div class="app-container">
    <!-- 侧边drawer -->
    <v-navigation-drawer fixed width="240" :clipped="$vuetify.breakpoint.lgAndUp" app v-model="drawer" dark>
      <!-- drawer 选单列表 -->
      <v-list ref="menu">
        <template v-for="item in menuItems">
          <!-- 带子选项 v-if="item.children"-->
          <v-list-group v-model="item.model" :key="item.name" :prepend-icon="item.icon" append-icon="">
            <v-list-tile slot="activator" @click="toChildItem(item)">
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ item.name }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile v-if="!child.notinmenu" :class="{'listitem-selected': $route.path === `/${item.route}/${child.route}`}" ripple
              v-for="(child, i) in item.children" :key="i" @click="toggleListItems(child, item)">
              <v-list-tile-action>
                <v-icon></v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ child.name }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list-group>
        </template>
      </v-list>
    </v-navigation-drawer>
    <!-- 头部显示条 -->
    <v-toolbar color="cyan darken-3" dark app :clipped-left="$vuetify.breakpoint.lgAndUp" fixed>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <span class="hidden-sm-and-down">帅帅互娱后台管理系统</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- 公众号下拉选择菜单 -->
      <v-toolbar-items>
        <v-menu offset-y transition="slide-x-transition">
          <v-btn depressed flat slot="activator">{{selAcc}}
            <v-icon right dark>keyboard_arrow_down</v-icon>
          </v-btn>
          <v-list>
            <v-list-tile v-for="(tile) in pubAccs" :key="tile.title" @click="toggle(tile)">
              <v-list-tile-title>{{ tile.text }}</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
      </v-toolbar-items>
      <!-- 系统全局操作菜单 -->
      <v-toolbar-items>
        <v-layout justify-center align-center>
          <v-icon>account_circle</v-icon>
          <span>{{username}}</span>
        </v-layout>
      </v-toolbar-items>
      <v-toolbar-items>
        <v-btn flat @click="toHomePage">
          <v-icon>home</v-icon>
          <span>主页</span>
        </v-btn>
      </v-toolbar-items>
      <v-toolbar-items>
        <v-btn flat @click="refreshPage">
          <v-icon>autorenew</v-icon>
          <span>刷新</span>
        </v-btn>
      </v-toolbar-items>
      <v-toolbar-items>
        <v-btn flat @click="exitToApp">
          <v-icon>exit_to_app</v-icon>
          <span>退出</span>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content class="content-wrapper">
      <!-- 路由入口 -->
        <router-view></router-view>
      <div v-if="progress" @click="PROGRESS(false)" class="progress-circle">
        <div class="progress-wrapper">
          <v-progress-circular :size="120" :width="9" indeterminate color="white"></v-progress-circular>
          <p class="title white--text">数据加载中...</p>
        </div>

      </div>
    </v-content>
    <!-- 全局snackbar -->
    <v-snackbar :timeout="5000" :color="snackbarColor" top multi-line v-model="snackbar">
      <span class="subheading">{{snackbarText}}</span>
      <v-btn flat color="red" @click.native="snackbar = false">
        <v-icon>cancel</v-icon>
      </v-btn>
    </v-snackbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data: () => ({
    dialog: false,
    drawer: null,
    listSelected: 0,
    username: "",
    pubAccs: [],
    selAcc: "平江帅帅",
    menuItems: [],
    snackbar: false,
    snackbarText: "",
    snackbarColor: "grey darken-4"
  }),
  computed: {
    ...mapState(["progress"]),
    _snack: {
      get: function() {
        return this.$store.state.snackbar;
      },
      set: function() {
        return false;
      }
    }
  },
  watch: {
    // 监测路由参数变化
    $route(from, to) {
      this.PROGRESS(false);
    },
    "$store.state.snackbar": {
      handler: (from, to) => {
        console.log(from, to);
      },
      deep: true
    }
  },
  mounted() {
    this.menuItems = this.$parent.menuData;
    // 刷新后侧边栏跳转到具体项
    let username = Cookie.get("username");
    let infoList = JSON.parse(sessionStorage.getItem("infoList"));
    if (username) {
      this.username = username;
    } else {
      // 未获取到用户名
      this.username = "";
    }
    // 存入公众号信息
    this.pubAccs = [];
    infoList.forEach(item => {
      this.pubAccs.push({
        text: item.wechatName,
        areaCode: item.areaCode,
        remark: item.remark
      });
    });
    let _this = this;
    $Vue.$on("toggleSnackbar", function(opt) {
      _this.toggleSnackbar(opt);
    });
  },
  methods: {
    ...mapMutations(["PROGRESS"]),
    handlePubAccChange(value) {
      // 选择公众号的时候保存sessionStorage保存 用于刷新
    },
    toggleSnackbar(opt) {
      let { show, text, color } = opt;
      show = show === undefined;
      color = color || "grey darken-4";
      this.snackbarText = text;
      this.snackbar = show;
      this.snackbarColor = color;
    },
    toggle(value) {
      // 切换公众号
      this.selAcc = value.text;
      Cookie.set("areaCode", value.areaCode);

      // this.CHANGE_AREACODE({ areaCode: value.areaCode });
      // 全局发送areaCodeChange 事件
      $Vue.$emit("areaCodeChange", Object.assign({}, value));
    },
    toHomePage() {
      let listHeader = document.querySelector(
        ".navigation-drawer .list__group__header"
      );
      if (!listHeader.classList.contains("list__group__header--active")) {
        document
          .querySelector(".list__group__header  .list__tile--link")
          .click();
      }
    },
    refreshPage() {
      $Vue.$emit("refreshPage", {
        areaCode: Cookie.get("areaCode")
      });
      // window.location.reload();
    },
    exitToApp() {
      // 清除相关数据
      // this.$router.push("/login");
      this.$emit("logout");
    },
    toggleListItems(child, item) {
      this.listSelected = child.name;
      this.$router.push(`/${item.route}/${child.route}`);
    },
    toChildItem(item) {
      if (!item.parent) {
        let route = item.children[0].route;
        this.$router.push(`/${item.route}/${route}`);
      } else {
        this.$router.push(`/${item.route}`);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.listitem-selected {
  color: #ffffff;
  background: #009688;
}
td {
  border-left: 1px solid #ddd;
}
.content-wrapper {
  position: relative;
  height: 100%;
}
.progress-circle {
  width: 100%;
  height: 100%;
  position: fixed;
  padding-left: 300px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .progress-wrapper {
    width: 16rem;
    height: 16rem;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 2rem;
    p {
      margin: 2rem;
    }
  }
}
</style>
